<template>
  <div class="Charge">
  		<el-input
  	        v-model="keyword"
  	        placeholder="请输入宿舍号"
  	        class="input-with-select"
  			style="width:40%"
  		>
  	        <template #append>				
  	          <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
  	        </template>        
  		</el-input>
  		<el-button primary @click="addInit">添加宿舍</el-button>
		<el-button warning @click="deleteBatch">批量删除</el-button> 
  		<p></p>
     <el-table :data="tableData" style="width: 100%" :stripe="true"
  		 ref="multipleTable"
  		    @selection-change="handleSelectionChange"
  		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  		 >
		<el-table-column min-width="15%" type="selection" align = "center"></el-table-column>
        <el-table-column prop="dorm_no" label="宿舍号" sortable  align = "center" />
		<el-table-column prop="dorm" label="宿舍楼" sortable  align = "center" />
        <el-table-column prop="ele" label="电量" sortable  align = "center"/>
        <el-table-column prop="airCost" label="空调费"  sortable  align = "center"/>
  		<el-table-column prop="netCost" label="网络费" sortable  align = "center"/>	
		<el-table-column label="操作" align = "center" >
			<template #default="scope">
				<el-button type="primary" @click="editInit(scope.row)" circle><el-icon><Edit /></el-icon></el-button>
				<el-button type="danger"  @click="insureDelete(scope.row.id)" circle><el-icon><Delete /></el-icon></el-button>
			</template>				
		</el-table-column>
  	  </el-table>
  		  <el-pagination
  		    small
  		    background
  		    layout="prev, pager, next"
  			:page-size="pageSize"
  		    :page-count="pageCount"
  			:current-page="currentPage"
  			@current-change="haddlePageChange"
  		  />
	
	  
	  <!-- 增加对话框 -->
	  <el-dialog v-model="dialogVisible" title="添加宿舍" width="35%" draggable>
	        <!-- <span>增加</span> -->
	  	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	  			  <el-form-item label="宿舍楼">
	  	        <el-select v-model="form.dorm" value-key="building" placeholder="请选择" style="width:700px;" @change="findDorm_no(form.dorm),this.form.dorm_no = null">
	  	          <el-option v-for="item in unique(dormOption)"
	  	        		:key="item.id"
	  	        		:label="item.building"
	  	        		:value="item.building">
	  	        	</el-option>
	  	        </el-select>
	  	      </el-form-item>
	  	      <el-form-item label="宿舍号">
	  	        <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:700px;">
	  	          <el-option v-for="item in dorm_noOption"
	  	        		:key="item.id"
	  	        		:label="item.dorm_no"
	  	        		:value="item.dorm_no">
	  	        	</el-option>
	  	        </el-select>
	  	      </el-form-item>
	  	      <el-form-item label="电费" prop="ele">
	  	        <el-input v-model="form.ele" />
	  	      </el-form-item>
	  			  <el-form-item label="空调费" prop="airCost">
	  			    <el-input v-model="form.airCost" />
	  			  </el-form-item>
	  			  
	  			  <el-form-item label="网费" prop="netCost">
	  			    <el-input v-model="form.netCost" />
	  			  </el-form-item>
		
	  	   </el-form>
	        <template #footer>
	          <span class="dialog-footer">
	            <el-button @click="dialogVisible = false">取消</el-button>
	            <el-button type="primary" @click="addSubmit()">提交</el-button
	            >
	          </span>
	        </template>
	      </el-dialog>
	  <!--  修改对话框 -->
	  <el-dialog v-model="editVisible" title="修改" width="60%" draggable>
	    <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	    	<el-form-item label="宿舍楼">
				<el-input v-model="form.dorm" :disabled="edit" />
	          <!-- <el-select v-model="form.dorm" value-key="dorm" placeholder="请选择" style="width:700px;">
	            <el-option v-for="item in dormOption"
	          		:key="item.id"
	          		:label="item.dorm"
	          		:value="item.dorm">
	          	</el-option>
	          </el-select> -->
	        </el-form-item>
	        <el-form-item label="宿舍号">
				<el-input v-model="form.dorm_no" />
	          <!-- <el-select v-model="form.dorm_no" value-key="dorm_no" placeholder="请选择" style="width:700px;">
	            <el-option v-for="item in dormOption"
	          		:key="item.id"
	          		:label="item.dorm_no"
	          		:value="item.dorm_no">
	          	</el-option>
	          </el-select> -->
	        </el-form-item>
	        <el-form-item label="电费" prop="ele">
	          <el-input v-model="form.ele" />
	        </el-form-item>
			  <el-form-item label="空调费" prop="airCost">
				<el-input v-model="form.airCost" />
			  </el-form-item>
			  
			  <el-form-item label="网费" prop="netCost">
				<el-input v-model="form.netCost" />
			  </el-form-item>
			  
	     </el-form>
	      <template #footer>
	        <span class="dialog-footer">
	          <el-button @click="editVisible = false">取消</el-button>
	          <el-button type="primary" @click="editSubmit()">提交</el-button
	          >
	        </span>
	      </template>
	    </el-dialog>

		<!--  统计图表 -->
	  <el-dialog v-model="echartsVisible" title="统计图表" width="50%" draggable>
		<div id="myChart" style="width:700px; height:450px" ></div>
	      <span class="dialog-footer">
	        <el-button @click="echartsVisible = false" >关闭</el-button>
	       </span>
	  </el-dialog> 	
	  
	  <!--  删除二次确认dialog -->
		<el-dialog v-model="deleteVisible" title="确认删除" width="20%" draggable>
		    <span class="dialog-footer" style="text-align: center;"><p>您确定要删除此数据吗</p>
		      <el-button @click="deleteVisible = false" >取消</el-button>
			  <el-button type="primary" @click="handleDelete(deleteId)" >确认</el-button>
		     </span>
		</el-dialog> 
  </div>
</template>

<script setup>
import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'

	let { proxy } = getCurrentInstance();
	var tableData=ref([]);
	var pageCount=ref(0)//总页数
	var pageSize=ref(9)
	var currentPage=ref(1)
	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("/chargeFindAllCtl",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	onMounted(()=>{
		getTableData()
		
	});
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();		
	}
	let dormOption=ref([]);//增加、修改中的宿舍楼下拉
	let form=ref({});//修改或增加的一个对象	
	const dialogVisible = ref(false)//增加对话框是否显示
	function addInit(){
		dorm_noOption.value = null
		form.value={}
		dialogVisible.value = true
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			dormOption.value=res.data.records;//下拉数据
		})
	}
	function addSubmit(){
		proxy.$http.post("/chargeAddCtl",form.value)
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
		})
	}

	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange1(currentpages){			
		currentPages.value=currentpages;
		checkReport();		
	}
	
	let editVisible=ref(false)
	const editInit = (row) => {
		editVisible.value = true
		form.value=row
		var pageSize=ref(100000)
		var currentPage=ref(1)
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("/DormitoryManagementFindAll",jsonparam)
		.then(res => {
			dormOption.value=res.data.records;//下拉数据
		})
	}
	const editSubmit=()=>{
		if(form.value.ele<9999 && form.value.airCost<9999 &&form.value.netCost<9999 )
		proxy.$http.post("/chargeUpdateCtl",form.value)
		.then(res => {
			editVisible.value = false	//关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空修改对象
			alert(res.data.message)	
		})
	}
	let deleteVisible=ref(false)
	var deleteId = ref()
	const insureDelete = (id) => {
		deleteVisible.value = true
		deleteId.value = id
	}
	const handleDelete = (id) => {
	  proxy.$http.get('/chargeDeleteCtl'+'?id='+id)
	  .then(res => {
		deleteVisible.value = false
	  	alert(res.data.message)
		getTableData();
	  })
	}
	
	let multipleSelection=ref([]);
	const handleSelectionChange=(val)=>{ //批量选择
		multipleSelection.value = val;
		//console.log(multipleSelection.value)
	}
	//批量删除
	function deleteBatch(){
		if(multipleSelection.value){
			proxy.$http.post('/ChargeDeleteInBatchCtl',
	              multipleSelection.value)
				   //根据接口组织删除用url
			.then(res => {			
				getTableData();  //更新表格数据
				alert(res.data.message)
			})
		}
		
	}
	//按关键字查询
	const keyword=ref('')
	let search=()=>{
		if(keyword.value=='')
			keyword.value=null
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
	    {"value":keyword.value,"key":"宿舍号","operator":"="},
		]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("chargeFindAllCtl",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
			keyword.value==''
			if(res.data.totalNum ==0 && keyword.value !=null)
			alert(res.data.message)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	
	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		if(value.length>4)
			callback(new Error('金额不得超过9999'))
		else if (!no.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}	  
	};
	
	//定义字符长度
	const formRules = reactive({
		ele: [
			{required: true, message: '请输入金额', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		netCost: [
			{required: true, message: '请输入金额', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		airCost:[
			{required: true, message: '请输入金额', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		
	})
	
					
	function unique(arr) {
	  const res = new Map();
	  return arr.filter((arr) => !res.has(arr.building) && res.set(arr.building, 1));
	}
	function findDorm_no(dorm){
		proxy.$http.get("/Dorm_noFindByDorm"+'?dorm='+dorm)
		.then(res => {
			 dorm_noOption.value=res.data.records;//下拉数据
		})
	}
	let dorm_noOption=ref([]);//增加、修改中的宿舍号下拉
</script>
//分页居中显示
<style scoped>
  .el-pagination {
	justify-content: center;
  }
</style>